import { KeyboardEvent } from "react";
import todoListStore from "../../store/todoListStore";

export default function Header() {
  const handleKey = (e: KeyboardEvent) => {
    if (e.key !== "Enter") return;
    const value = (e.target as HTMLInputElement).value.trim();
    if (!value) return;
    todoListStore.addTodo(value);
    (e.target as HTMLInputElement).value = "";
  };
  return (
    <div className="todo-header">
      <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={handleKey} />
    </div>
  );
}
